<script setup lang="ts">
import type { PrescriptionMedicine } from '@/types/room';

withDefaults(defineProps<{
  medicines?: PrescriptionMedicine[]
}>(), {
  medicines: [] as any
})
</script>

<template>
  <view class="medicine-list">
    <view v-for="medicine in medicines" :key="medicine.id" class="medicine-list-item">
      <image class="medicine-cover" :src="medicine.avatar" mode="aspectFill" />
      <view class="medicine-info">
        <text class="name">{{ medicine.name }}</text>
        <text :class="{ symbol: medicine.prescriptionFlag === '1' }">
          {{ medicine.specs }}
        </text>
        <text class="price">¥{{ medicine.amount }}</text>
      </view>
      <view class="quantity">x{{ medicine.quantity }}</view>
      <view class="guide">用法用量：{{ medicine.usageDosag }}</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.medicine-list {
  padding: 0 30rpx;
  background-color: #fff;
}

.medicine-list-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #ededed;
  position: relative;

  &:last-child {
    border-bottom: none;
  }

  .medicine-cover {
    width: 180rpx;
    height: 160rpx;
    float: left;
  }

  .medicine-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 160rpx;
    padding-left: 20rpx;

    .name {
      font-size: 30rpx;
      font-weight: 500;
      color: #121826;
    }

    .unit {
      color: #979797;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      text-overflow: 1;

      &.symbol::before {
        content: '处方药';
        line-height: 1;
        padding: 8rpx 10rpx;
        margin-right: 10rpx;
        border-radius: 4rpx;
        font-size: 24rpx;
        color: #fff;
        background-color: #16c2a3;
      }
    }

    .price {
      color: #eb5757;
      font-size: 32rpx;
    }
  }

  .quantity {
    top: 30rpx;
    right: 0;
    position: absolute;

    font-size: 30rpx;
    color: #121826;
  }

  .guide {
    clear: both;
    padding: 20rpx;
    margin-top: 30rpx;
    font-size: 28rpx;
    color: #848484;
    border-radius: 10rpx;
    background-color: #f6f6f6;
  }
}
</style>
